<!-- 封装VanFieldCheckbox多选组件 -->
<template>
  <div>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="~无更多信息~"
          @load="onLoad"
          :class="dataSource.length ? '' : 'no-list'"
        >
          <van-checkbox-group
            v-model="checkboxList"
            ref="checkboxGroup"
            direction="horizontal"
            @change="changeValue"
          >
            <div v-if="checkedShow">
              <van-checkbox
                v-for="(item, index) in dataSource"
                :key="index"
                class="wrap"
                :name="item"
                shape="square"
                :disabled="canNotCheck(item)"
                :label-disabled="true"
              >
                <div>
                  <slot name="head" :item="item" :index="index">
                    <div class="top">
                      <!-- <div class="icon"></div> -->
                      <div class="title titleWidth" v-if="!columns.subtitleKey">
                        {{ checkValue(item[columns.titleKey]) }}
                      </div>
                      <div class="title titleWidth" v-if="columns.subtitleKey">
                        {{ checkValue(item[columns.titleKey]) }}|{{
                          checkValue(item[columns.subtitleKey])
                        }}
                      </div>
                      <div
                        class="spot"
                        v-if="columns.operation"
                        @click.stop="operationShow(item)"
                      >
                        <img src="../../assets/diandian.png" alt="" />
                      </div>
                    </div>
                  </slot>
                  <slot name="body" :item="item" :index="index">
                    <div class="center">
                      <div>
                        <p
                          v-for="(items, indexs) in columns.content
                            ? columns.content.slice(0, minLen)
                            : []"
                          :key="indexs"
                        >
                          <span class="key" v-if="items.name == '展示批次'"
                            >批次编号：</span
                          >
                          <span class="value" v-if="items.name == '展示批次'">
                            <!-- <batch-production :code="item[items.key[0]]" :id="item[items.key[1]]"></batch-production> -->
                            <span
                              style="color:#1890ff"
                              @click.stop="showBatch(item[items.key[1]])"
                              >{{ item[items.key[0]] || "--" }}</span
                            >
                          </span>
                          <span class="key" v-if="items.name != '展示批次'"
                            >{{ items.name }}：</span
                          >
                          <span class="value" v-if="items.name != '展示批次'">
                            <span v-for="(e, v) in items.key" :key="v">{{
                              checkValue(item[e])
                            }}</span>
                          </span>
                          <span
                            @click.stop="changeContentShow(index, false)"
                            v-if="
                              indexs == minLen - 1 &&
                                columns.content.length > minLen &&
                                item.contentShow
                            "
                            class="arrow"
                            >收起
                            <van-icon name="arrow-up" />
                          </span>
                          <span
                            @click.stop="changeContentShow(index, true)"
                            v-if="
                              indexs == minLen - 1 &&
                                columns.content.length > minLen &&
                                !item.contentShow
                            "
                            class="arrow"
                            >展开
                            <van-icon name="arrow-down" />
                          </span>
                        </p>
                      </div>
                      <div v-if="item.contentShow" class="showAll showAll2">
                        <p
                          v-for="(items, indexs) in columns.content
                            ? columns.content.slice(
                                minLen,
                                columns.content.length
                              )
                            : []"
                          :key="indexs"
                        >
                          <span class="key" v-if="items.name == '展示批次'"
                            >批次编号：</span
                          >
                          <span class="value" v-if="items.name == '展示批次'">
                            <!-- <batch-production :code="item[items.key[0]]" :id="item[items.key[1]]"></batch-production> -->
                            <span
                              style="color:#1890ff"
                              @click.stop="showBatch(item[items.key[1]])"
                              >{{ item[items.key[0]] || "--" }}</span
                            >
                          </span>
                          <span class="key" v-if="items.name != '展示批次'"
                            >{{ items.name }}：</span
                          >
                          <span class="value" v-if="items.name != '展示批次'">
                            <span v-for="(e, v) in items.key" :key="v">{{
                              checkValue(item[e])
                            }}</span>
                          </span>
                        </p>
                      </div>
                    </div>
                  </slot>
                  <slot name="label" :item="item" :index="index">
                    <div class="label" v-if="columns.labelKey">
                      <!-- labelText: {key: "text"}  key对应labelKey内元素 -->
                      <span v-for="(i, j) in columns.labelKey" :key="j">{{
                        `${
                          columns.labelText ? columns.labelText[i] : ""
                        }${checkValue(item[i])}`
                      }}</span>
                    </div>
                  </slot>
                  <slot name="foot" :item="item" :index="index">
                    <div
                      class="foot"
                      v-if="
                        columns.peopleKey ||
                          columns.flowStatusNameKey ||
                          columns.operationText
                      "
                    >
                      <div style="display: flex">
                        <span class="pictures" v-if="columns.peopleKey">{{
                          item[columns.peopleKey]
                            ? item[columns.peopleKey].slice(-2)
                            : ""
                        }}</span>
                        <span class="text" v-if="columns.peopleKey"
                          >由{{ item[columns.peopleKey] }}提交</span
                        >
                      </div>
                      <div
                        class="opera"
                        v-if="columns.operationText"
                        @click.stop="operationIt(item, columns.operationText)"
                      >
                        {{ columns.operationText }}
                      </div>
                      <div
                        class="opera"
                        v-if="columns.flowStatusNameKey"
                        :style="{
                          color:
                            item.flowStatus == 'RUNNING'
                              ? '#1890FF'
                              : item.flowStatus == 'TERMINATED'
                              ? '#FF943E'
                              : item.flowStatus == 'AGREE'
                              ? '#00B042'
                              : item.flowStatus == 'REFUSE'
                              ? '#FF4D4F'
                              : '#1890ff',
                        }"
                      >
                        {{ item[columns.flowStatusNameKey] }}
                      </div>
                    </div>
                  </slot>
                </div>
              </van-checkbox>
            </div>
            <div v-else>
              <div
                v-for="(item, index) in dataSource"
                :key="index"
                @click="handleItem(item)"
                class="wrap"
              >
                <div>
                  <slot name="head" :item="item" :index="index">
                    <div class="top">
                      <div class="icon"></div>
                      <div class="title" v-if="!columns.subtitleKey">
                        {{ checkValue(item[columns.titleKey]) }}
                      </div>
                      <div
                        class="title"
                        v-if="columns.subtitleKey && !columns.subtitleKey"
                      >
                        {{ checkValue(item[columns.titleKey]) }}|{{
                          checkValue(item[columns.subtitleKey])
                        }}
                      </div>
                      <div class="title" v-if="columns.thtitleKey">
                        {{ checkValue(item[columns.titleKey]) }}|{{
                          checkValue(item[columns.subtitleKey])
                        }}|{{ checkValue(item[columns.thtitleKey]) }}
                      </div>

                      <div
                        class="spot"
                        v-if="columns.operation"
                        @click.stop="operationShow(item)"
                      >
                        <img src="../../assets/diandian.png" alt="" />
                      </div>
                    </div>
                  </slot>
                  <slot name="body" :item="item" :index="index">
                    <div class="center">
                      <div>
                        <p
                          v-for="(items, indexs) in columns.content
                            ? columns.content.slice(0, minLen)
                            : []"
                          :key="indexs"
                        >
                          <span class="key" v-if="items.name == '展示批次'"
                            >批次编号：</span
                          >
                          <span class="value" v-if="items.name == '展示批次'">
                            <!-- <batch-production :code="item[items.key[0]]" :id="item[items.key[1]]"></batch-production> -->
                            <span
                              style="color:#1890ff"
                              @click.stop="showBatch(item[items.key[1]])"
                              >{{ item[items.key[0]] || "--" }}</span
                            >
                          </span>
                          <span class="key" v-if="items.name != '展示批次'"
                            >{{ items.name }}：</span
                          >
                          <!--change by gongjiuhui start-->
                          <span
                            class="value"
                            :style="items.style"
                            v-if="
                              items.key.length < 2 &&
                                items.name != '展示批次' &&
                                items.type != 'link'
                            "
                          >
                            <span v-for="(e, v) in items.key" :key="v">{{
                              checkValue(item[e])
                            }}</span>
                          </span>
                          <span
                            class="value"
                            :style="items.style"
                            v-if="
                              items.key.length < 2 &&
                                items.name != '展示批次' &&
                                items.type == 'link'
                            "
                            @click="toDetail(item)"
                          >
                            <span v-for="(e, v) in items.key" :key="v">
                              {{ checkValue(item[e]) }}
                              <van-icon
                                name="arrow"
                                size="16px"
                                color="#1890ff"
                                style="top: 3px;"
                              />
                            </span>
                          </span>

                          <span
                            class="value"
                            :style="items.style"
                            v-if="
                              items.key.length > 1 &&
                                items.name != '展示批次' &&
                                items.type != 'text'
                            "
                          >
                            <span v-for="(e, v) in items.key" :key="v"
                              >{{ checkValue(item[e])
                              }}<span v-if="v != items.key.length - 1">
                                / {{ items.keySymbol }}</span
                              ></span
                            >
                          </span>
                          <span
                            class="value"
                            :style="items.style"
                            v-if="
                              items.key.length > 1 &&
                                items.name != '展示批次' &&
                                items.type == 'text'
                            "
                          >
                            <span v-for="(e, v) in items.key" :key="v"
                              >{{ checkValue(item[e])
                              }}<span v-if="v != items.key.length - 1">
                                | {{ items.keySymbol }}</span
                              ></span
                            >
                          </span>
                          <!--change by gongjiuhui end-->
                          <span
                            class="arrow"
                            @click.stop="changeContentShow(index, false)"
                            v-if="
                              indexs == minLen - 1 &&
                                columns.content.length > minLen &&
                                item.contentShow
                            "
                            >收起
                            <van-icon name="arrow-up" />
                          </span>
                          <span
                            class="arrow"
                            @click.stop="changeContentShow(index, true)"
                            v-if="
                              indexs == minLen - 1 &&
                                columns.content.length > minLen &&
                                !item.contentShow
                            "
                            >展开
                            <van-icon name="arrow-down" />
                          </span>
                        </p>
                      </div>
                      <div v-if="item.contentShow" class="showAll">
                        <p
                          v-for="(items, indexs) in columns.content
                            ? columns.content.slice(
                                minLen,
                                columns.content.length
                              )
                            : []"
                          :key="indexs"
                        >
                          <span class="key" v-if="items.name == '展示批次'"
                            >批次编号：</span
                          >
                          <span class="value" v-if="items.name == '展示批次'">
                            <!-- <batch-production :code="items.key[0]" :id="items.key[1]"></batch-production> -->
                            <span
                              style="color:#1890ff"
                              @click.stop="showBatch(item[items.key[1]])"
                              >{{ item[items.key[0]] || "--" }}</span
                            >
                          </span>
                          <span class="key" v-if="items.name != '展示批次'"
                            >{{ items.name }}：</span
                          >
                          <span class="value" v-if="items.name != '展示批次'">
                            <span v-for="(e, v) in items.key" :key="v">{{
                              checkValue(item[e])
                            }}</span>
                          </span>
                        </p>
                      </div>
                    </div>
                  </slot>
                  <slot name="label" :item="item" :index="index">
                    <div class="label" v-if="columns.labelKey">
                      <!-- labelText: {key: "text"}  key对应labelKey内元素 -->
                      <span v-for="(i, j) in columns.labelKey" :key="j">{{
                        `${
                          columns.labelText ? columns.labelText[i] : ""
                        }${checkValue(item[i])}`
                      }}</span>
                    </div>
                  </slot>
                  <slot name="foot" :item="item" :index="index">
                    <div
                      class="foot"
                      v-if="
                        columns.peopleKey ||
                          columns.flowStatusNameKey ||
                          columns.operationText
                      "
                    >
                      <div style="display: flex">
                        <span class="pictures" v-if="columns.peopleKey">{{
                          item[columns.peopleKey]
                            ? item[columns.peopleKey].slice(-2)
                            : ""
                        }}</span>
                        <span class="text" v-if="columns.peopleKey"
                          >由{{ item[columns.peopleKey] }}提交</span
                        >
                      </div>
                      <div
                        class="opera"
                        v-if="columns.operationText"
                        @click.stop="operationIt(item, columns.operationText)"
                      >
                        {{ columns.operationText }}
                      </div>
                      <div
                        class="opera"
                        v-if="columns.flowStatusNameKey"
                        :style="{
                          color:
                            item.flowStatus == 'RUNNING'
                              ? '#1890FF'
                              : item.flowStatus == 'TERMINATED'
                              ? '#FF943E'
                              : item.flowStatus == 'AGREE'
                              ? '#00B042'
                              : item.flowStatus == 'REFUSE'
                              ? '#FF4D4F'
                              : '#1890ff',
                        }"
                      >
                        {{ item[columns.flowStatusNameKey] }}
                      </div>
                    </div>
                  </slot>
                </div>
              </div>
            </div>
          </van-checkbox-group>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <div v-if="checkedShow" style="height: 0.5rem"></div> -->
    <div class="operation" v-if="checkedShow">
      <div>
        <img
          @click="changeItem(true)"
          v-if="checkboxList.length == 0"
          class="img1"
          src="../../assets/btna.png"
          alt=""
        />
        <img
          @click="changeItem(true)"
          v-if="
            checkboxList.length !== 0 &&
              checkboxList.length !== dataSource.length
          "
          class="img2"
          src="../../assets/btnb.png"
          alt=""
        />
        <!-- 勾选 -->
        <img
          @click="changeItem(false)"
          v-if="
            checkboxList.length !== 0 &&
              checkboxList.length === dataSource.length
          "
          class="img2"
          src="../../assets/btnc.png"
          alt=""
        />
        <span class="imgSpan">
          {{ checkedShowText }}{{ checkboxList.length }}/{{
            dataSource.length
          }}</span
        >
      </div>
      <div
        class="btncancel"
        v-if="cancelOperationTxt"
        @click="getListValue('cancel')"
      >
        {{ cancelOperationTxt }}
      </div>
      <div class="singel-info" @click="getListValue" v-if="singelInfo">
        {{ operationTxt }}
      </div>
      <div class="info" @click="getListValue" v-else>{{ operationTxt }}</div>
    </div>
    <van-action-sheet v-model="actionShow" title="请选择">
      <div
        class="actionWrap"
        v-for="(item, index) in columns.operation"
        :key="index"
      >
        <div class="left"><img :src="item.icon" alt="" /></div>
        <div class="right" @click="operationIt(itemData, item.name)">
          <p class="handle" :style="{ color: item.color || '#191F25' }">
            {{ item.name }}
          </p>
          <p class="explain">{{ item.remarks }}</p>
        </div>
      </div>
    </van-action-sheet>
    <BatchProductionModal ref="BatchProductionModal"></BatchProductionModal>
  </div>
</template>

<script>
import { getAction, postAction } from "@/api/manage";
import BatchProductionModal from "@/components/BatchProductionModal";
export default {
  name: "pageList",
  components: { BatchProductionModal },
  props: {
    columns: {
      type: Object,
      default: function() {
        return {};
      },
    },
    isPage: {
      type: Boolean,
      default: true,
    }, //是分页
    singelInfo: {
      type: Boolean,
      default: false,
    }, //多选时底部只有确定样式按钮
    checkedShow: {
      type: Boolean,
      default: false,
    }, //是否开启选择
    checkedShowText: {
      type: String,
      default: "已选",
    }, //是否开启选择
    operationTxt: {
      type: String,
      default: "确定",
    },
    cancelOperationTxt: {
      type: String,
      default: "",
    },
    listUrl: {
      type: String,
      default: "",
    },
    minLen: {
      type: Number,
      default: 2,
    },
    pageSize: {
      type: Number,
      default: 30, //条数
    },
    usedGetMethods: {
      type: Boolean,
      default: true,
    },
  },
  computed: {},
  data() {
    return {
      actionShow: false, //底部操作开关
      checkboxList: [], //列表选中的数据
      loading: false,
      finished: false,
      refreshing: false,
      pageNo: 1, //页码
      queryParam: {}, //查询条件
      dataSource: [], //列表数据
      total: "", //列表总条数
      itemData: {},
    };
  },
  created() {},
  methods: {
    // 字段值为可跳转类型
    toDetail(item) {
      this.$emit("toOtherPage", item);
    },
    showBatch(id) {
      this.$refs.BatchProductionModal.getData(id);
    },
    // 判断是否为空
    checkValue(v) {
      if (v ?? "" !== "") {
        return v;
      } else {
        return v === 0 ? v : "--";
      }
    },
    // 动态禁用复选框
    canNotCheck(item) {
      if (this.columns.dynamicChecked) {
        return this.$parent.canNotCheck(item);
      }
    },
    changeValue(v) {
      console.log(v);
      if (v.length === this.dataSource.length) {
      } else {
      }
    },
    // 更多操作
    operationShow(v) {
      // console.log(v, "更多操作");
      this.$emit("handleList", v.id, v, "更多操作");
      if (this.columns.operation.length > 0) {
        this.actionShow = true;
      } else {
        this.$toast("当前数据暂无操作");
      }
      this.itemData = v;
    },
    // 操作事件
    operationIt(a, b) {
      // console.log(a, b, "操作事件");
      this.actionShow = false;
      this.$emit("operationItem", a, b);
    },
    handleItem(v) {
      // console.log(v, "点击整个列表");
      this.$emit("handleList", v.id, v, "列表");
    },
    // 控制展开收起
    changeContentShow(a, b) {
      console.log(a, b);
      this.dataSource[a].contentShow = b;
      this.$forceUpdate();
    },
    // 全选点击事件
    getListValue(cancel) {
      let ids =
        this.checkboxList
          .map((e) => {
            return e.id;
          })
          .toString() || "";
      if (cancel) {
        this.$emit("getCheckedValue", ids, this.checkboxList, cancel);
      } else {
        this.$emit("getCheckedValue", ids, this.checkboxList);
      }
    },
    // 控制全选、清空
    changeItem(v) {
      if (this.columns.dynamicChecked) {
        // canCheckedNum: 未被禁用的复选框数量
        // 已选中数量等于可选复选框数量时就可以清空了
        if (this.checkboxList.length == this.columns.canCheckedNum) {
          this.$refs.checkboxGroup.toggleAll(false);
        } else {
          // 全部选中，并跳过禁用的复选框
          this.$refs.checkboxGroup.toggleAll({
            checked: true,
            skipDisabled: true,
          });
        }
      } else {
        // 默认操作
        this.$refs.checkboxGroup.toggleAll(v);
      }
    },
    // 获取列表数据
    onLoad(pageNo) {
      if (!this.listUrl) {
        this.$toast("请设置url.list属性!");
        return;
      }
      if (pageNo === 1) {
        this.pageNo = 1;
        this.dataSource = [];
      }
      if (this.refreshing) {
        this.dataSource = [];
        this.refreshing = false;
      }
      let par = {
        ...this.queryParam,
        ...{ pageNo: this.pageNo, pageSize: this.pageSize },
      };
      this.loading = true;
      let getDatafunction = this.usedGetMethods ? getAction : postAction;
      getDatafunction(this.listUrl, par)
        .then((res) => {
          if (res.code == 200) {
            if (res.result.pageList) {
              let dataList = res.result.pageList.records;
              this.dataSource = [...this.dataSource, ...dataList];
              this.dataSource = this.dataSource.map((e) => {
                e.contentShow = false;
                return e;
              });
              if (this.dataSource.length === res.result.pageList.total) {
                this.finished = true;
              } else {
                this.pageNo += 1;
              }
            } else {
              if (this.isPage == false) {
                let dataList = res.result.records || res.result;
                this.dataSource = [...this.dataSource, ...dataList];
                this.finished = true;
              } else {
                this.$emit("listTotal", res.result.total);
                let dataList = res.result.records || res.result;
                this.dataSource = [...this.dataSource, ...dataList];
                this.dataSource = this.dataSource.map((e) => {
                  e.contentShow = false;
                  return e;
                });
                if (this.dataSource.length === res.result.total) {
                  this.finished = true;
                } else {
                  if (!res.result.total) {
                    this.finished = true;
                    return;
                  }
                  this.pageNo += 1;
                }
              }
            }
            this.$emit("listData", this.dataSource);
            this.loading = false;
          } else {
            this.$toast(res.message);
            this.loading = false;
            this.finished = true;
          }
        })
        .catch((e) => {
          this.loading = false;
          this.finished = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.checkboxList = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad(1);
    },
    // 搜索
    searchQuery(v) {
      this.queryParam = v;
      this.onRefresh();
    },
    // 重置
    searchReset() {
      this.queryParam = {};
      this.onRefresh();
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.list {
  .wrap {
    // min-height: 0.5rem;
    background: #fff;
    margin-top: 20px;
    padding: 32px;
    width: 100vw;
    .top {
      display: flex;
      justify-content: flex-start;
      .icon {
        width: 6px;
        height: 32px;
        background: #1890ff;
        margin-top: 6px;
        margin-right: 20px;
      }
      .title {
        width: 602px;
        margin-right: 20px;
        // height: 0.16rem;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191f25;
        // line-height: 0.23rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .titleWidth {
        width: 572px;
        margin-left: 24px;
      }
      .spot img {
        width: 40px;
        height: 40px;
      }
    }
    .center {
      p {
        margin: 16px 25px;
        font-size: 28px;
        display: flex;
        position: relative;
        .key {
          color: #888888;
        }
        .value {
          color: #191f25;
          width: 380px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .arrow {
          color: #1890ff;
          // float: right;
          // margin-right: -0.05rem;
          // display: block;
          position: absolute;
          right: -10px;
        }
      }
      .showAll {
        background: #f5f8ff;
        width: 100vw;
        margin-left: -30px;
        padding: 30px;
        margin-bottom: 30px;
      }
      .showAll2 {
        width: 100%;
        margin: 0 0 30px 0;
        padding: 30px 0;
      }
    }
    .label {
      margin-left: -6px;
      margin-top: -20px;
      span {
        height: 32px;
        background: #f0f6fe;
        color: #1890ff;
        margin-right: 20px;
        padding: 6px 16px;
        font-size: 22px;
        border-radius: 6px;
      }
    }
    .foot {
      // height: 0.33rem;
      // line-height: 0.33rem;
      display: flex;
      justify-content: space-between;
      // margin: 0.15rem 0.12rem 0 0.12rem;
      font-size: 28px;
      .pictures {
        width: 66px;
        height: 66px;
        line-height: 66px;
        text-align: center;
        color: #fff;
        background: #1890ff;
        display: block;
        border-radius: 12px;
        font-size: 24px;
        margin-right: 20px;
      }
      .text {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .opera {
        color: #1890ff;
        font-size: 28px;
      }
    }
  }
}
// 全选样式
.operation {
  width: 100%;
  height: 100px;
  line-height: 100px;
  position: fixed;
  bottom: 0;
  background: #ffff;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  font-size: 28px;
  font-weight: 500;
  color: #191f25;
  .img1 {
    width: 40px;
    height: 40px;
    margin-top: -10px;
  }
  .img2 {
    width: 44px;
    height: 44px;
    margin-top: -10px;
  }
  .imgSpan {
    margin-left: 10px;
  }
  .info {
    width: 200px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }
  .singel-info {
    width: 100%;
    height: 78px;
    line-height: 78px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }
  .btncancel {
    width: 200px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }
}
// 底部操作弹窗样式
.actionWrap {
  display: flex;
  justify-content: flex-start;
  padding: 30px;
  .left {
    // background: #000;
    width: 40px;
    height: 40px;
    margin-right: 20px;
    img {
      width: 40px;
      height: 40px;
    }
  }
  .right {
    flex: 1;
    p {
      margin: 0;
    }
    .handle {
      color: #191f25;
      font-size: 32px;
    }
    .explain {
      color: #888888;
      font-size: 28px;
    }
  }
}
.no-list {
  /deep/ .van-list__finished-text {
    line-height: calc(100vh - 300px);
  }
}
</style>
